<template>
	<view>
		<view class="uni-flex uni-row topBar" :style="{'width': screenHeight+'px'}">
			<view v-for="(item,index) in topBartext" :key="index" @click="topBarBtn(item,index)">
				<text :style="{'border-bottom':item.bottom}">{{item.text}}</text>
			</view>
		</view>
		<!-- 文章 -->
		<view class="Medie" :style="{'width': screenHeight+'px','height':item.isMp4 == true?'550rpx':'294rpx'}" :key="index" v-show="artArr.length!=0" v-for="(item,index) in artArr" @click="artDes(item)">
			<view>
				<!-- 搜索的文章标题 -->
				<view class="title">{{item.title?item.title:'无标题'}}</view>
				<view class="uni-flex uni-row">
					<!-- 文章封面 -->
					<view v-show="item.isMp4 == false" class="feng">
						<image :src="item.img_url" v-if="item.img_url!=null&&item.img_url!=''&&item.img_url!='undefined'&&item.img_url!='null '&&item.type == 1" mode="aspectFill"></image>
						<image :src="item.imgList[0]" v-else-if="item.imgList.length!=0&&item.type == 1" mode="aspectFill"></image>
						<image :src="item.fowImgUrl" v-if="item.fowImgUrl" mode="aspectFill"></image>
					</view>
					<!-- 内容 -->
					<view>
						<view class="uni-flex uni-column des" :style="{'width':item.imgList.length!=0?screenHeight+'px':'420rpx'}">
							<!-- 不是视频 -->
							<view v-html="item.subhead_content" v-if="item.isMp4 == false&&item.type == 2" :style="{'width':item.fowImgUrl?'420rpx':'690rpx'}"></view>
							<view v-html="item.content" v-if="item.isMp4 == false&&item.type == 1" :style="{'width':item.img_url!=null&&item.img_url!=''&&item.img_url!='undefined'&&item.img_url!='null '||item.imgList.length!=0?'420rpx':'690rpx'}"></view>
							<view v-if="item.isMp4 == false">{{item.nicheng?item.nicheng:'未设置昵称'}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.creat_time}}</view>
							<!-- 是视频 -->
							<image :src="item.videoImage_url" v-if="item.isMp4 == true"></image>
							<i class="iconfont iconbofang" v-if="item.isMp4 == true"></i>
							<view v-if="item.isMp4 == true">{{item.nicheng?item.nicheng:'未设置昵称'}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.creat_time}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 视频 -->
		<my-video :list="videoArr" :title="searchName" :pagesize="videoPagesize" :contentText="contentText" type="0" v-if="videoArr.length!=0"></my-video>
		<!-- 找不到数据 -->
		<view v-show="isNotFound" class="noContent">
			<i class="iconfont iconwujilu"></i>
			<view class="notFind">我们无法找到它。</view>
			<view class="sorry">对不起 :(</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import artDate from '@/common/util.js';
	import uParse from '@/components/u-parse/u-parse.vue';
	import myVideo from '@/components/school/video';
	export default {
		components:{
			uParse,
			myVideo,
		},
		data() {
			return {
				screenHeight: 0,		//手机屏幕宽度
				userInfo:null,		//登录信息
				topBartext:[
					{text:'全部',bottom:null},
					{text:'文章',bottom:null},
					{text:'视频',bottom:null},
					{text:'直播',bottom:null},
				],
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				allArr:[],		//全部内容
				artArr:[],		//文章内容
				videoArr:[],	//视频内容
				liveArr:[],		//直播内容
				artPage:1,			//文章当前页数
				artPagesize:8,		//视频当前条数
				artTotal:0,			//文章一共多少页
				videoPage:1,			//视频当前页数
				videoPagesize:8,		//视频当前条数
				videoTotal:0,			//视频一共多少页
				barText:null,	//导航文字
				searchName:null,	//搜索名字
				isNotFound:false,	//控制没有内容显示
				artFengmian:0,		//有无封面文章的长度
				status: 'more',
				isNull: false, //是否为空列表
			}
		},
		onLoad(e) {
			this.isNull = false;
			this.topBartext[0].bottom = '8rpx solid #8FC6FE'
			this.isNotFound = false
			/* 获取手机屏幕高度 */
			let phone = uni.getSystemInfoSync()
			this.screenHeight = phone.screenWidth
			/* 获取登录信息 */
			this.userInfo = uni.getStorageSync('userInfo')
			if(e.searchName!="null"){
				this.searchName = e.searchName
				if(this.searchName!=null&&this.searchName!=''){
                    let webView = this.$mp.page.$getAppWebview();
                    webView.setTitleNViewSearchInputText(this.searchName);
                }
				this.artList()
			}else{
				this.artList()
			}
			/* 导航文本 */
			this.barText = '全部'
		},
		onShow() {
			this.isNull = false;
		},
		// 下拉刷新
		onPullDownRefresh(){
			console.log('顶部')
			uni.stopPullDownRefresh()
		},
		/* 下拉分页 */
		onReachBottom() {
			this.status = 'loading';
			this.isNull = false;
			console.log('Total',this.Total);
			console.log(this.barText);
			switch (this.barText){
				case '全部':
				if(this.artPage < this.artTotal){
					this.artPage++
					console.log('文章当前页',this.artPage);
					this.artList()
					this.videoPage = 1
				}else{
					console.log('视频当前页',this.videoPage);
					console.log('文章当前页',this.artPage);
					console.log('视频一共几页',this.videoTotal);
					if(this.videoPage == 1){
						this.videoList()
					}
					if(this.videoPage<=this.videoTotal){
						console.log(true);
						this.videoList()
					}
					this.videoPage++
				}
					break;
				case '文章':
				this.artPage++
				this.artList()
				if(this.artPage >= this.artTotal){
					this.isNotFound = false
				}
				console.log('当前页',this.artPage);
				console.log(this.isNotFound);
					break;
				case '视频':
				this.videoPage++
				this.videoList()
					break;
				case '直播':
					break;
				default:
					break;
			}
		},
		/* 监听搜索框内容变化 */
		onNavigationBarSearchInputChanged(e) {
			console.log('text',e.text)
			this.searchName = e.text
		},
		/* 搜索按钮 */
		onNavigationBarButtonTap(e) {
			this.artPage = 1
			this.topBartext[0].bottom = '8rpx solid #8FC6FE'
			for (var i = 1; i < this.topBartext.length; i++) {
				this.topBartext[i].bottom = null
			}
			console.log('搜索',this.searchName);
			if(this.searchName!=null&&this.searchName!=''){
                let webView = this.$mp.page.$getAppWebview();
                webView.setTitleNViewSearchInputText(this.searchName);
            }
			this.artArr = []
			this.videoArr = []
			this.artList()
			this.videoList()
		},
		/* 监听软键盘上的搜索,完成按钮 */
		onNavigationBarSearchInputConfirmed(){
			this.artPage = 1
			console.log('搜索键盘');
			this.topBartext[0].bottom = '8rpx solid #8FC6FE'
			for (var i = 1; i < this.topBartext.length; i++) {
				this.topBartext[i].bottom = null
			}
			console.log('搜索',this.searchName);
			if(this.searchName!=null&&this.searchName!=''){
			    let webView = this.$mp.page.$getAppWebview();
			    webView.setTitleNViewSearchInputText(this.searchName);
			}
			this.artArr = []
			this.videoArr = []
			this.artList()
			this.videoList()
		},
		methods: {
			topBarBtn(item,index){
				this.isNull = false;
				this.isNotFound =false
				/* 初始化内容 */
				this.allArr = []
				this.artArr = []
				this.videoArr = []
				this.liveArr = []
				this.barText = item.text
				/* 切换头部选项卡 */
				for (var i = 0; i < this.topBartext.length; i++) {
					if(this.topBartext[i].text == item.text){
						this.topBartext[i].bottom = '8rpx solid #8FC6FE'
					}else{
						this.topBartext[i].bottom = null
					}
				}
				switch (item.text){
					case '全部':
					this.artPage = 1
					this.videoPage = 1
					this.artList()
						break;
					case '文章':
					this.artPage = 1
					this.artList()
						break;
					case '视频':
					this.videoPage = 1
					this.videoList()
						break;
					case '直播':
					uni.navigateTo({
						url: '/pages/album/teacher-live',
					});
						break;
					default:
						break;
				}
			},
			/* 文章列表 */
			artList(){
				let resData = {
					users_type:this.userInfo.users_type,
					page:this.artPage,
					pagesize:this.artPagesize,
				}
				/* 搜索内容、话题、历史记录 */
				console.log('是否为null',this.searchName);
				if(this.searchName){
					resData.title = this.searchName
				}
				this.$api.apiPost('user/article.Lists/articleList',resData).then(res => {
					const DATA = res.data
					console.log(DATA);
					this.artTotal = DATA.data.last_page
					if(DATA.code == 200){
						this.isNotFound = false
						console.log('fffffffffff');
						for (let i = 0; i < DATA.data.data.length; i++) {
							/* 时间转换格式yyyy/MM/dd */
							// DATA.data.data[i].creat_time = new Date(DATA.data.data[i].creat_time*1000).toLocaleDateString()
							DATA.data.data[i].creat_time = artDate.getLeftTime(DATA.data.data[i].creat_time)
							/* 富文本图片大小修改 */
							DATA.data.data[i].content = DATA.data.data[i].content.replace(/amp;/g, '').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
							DATA.data.data[i].content = DATA.data.data[i].content.replace(/><video>/g,
								'"autoplay="true" loop="true" show-center-play-btn="true" show-play-btn="false"></video>'
							).replace(/src=/g, 'style="max-width:100%;" src=').replace(/<img/g,"<img style='width:0px;height:0px;'").replace(/<video/g,"<video style='width:0px;height:0px;'");
							
							/* 判断img_url是否是视频 */
							if(DATA.data.data[i].img_url.indexOf('.jpg')==-1&&DATA.data.data[i].content.indexOf('.mp4')!=-1){
								DATA.data.data[i].isMp4 = true
							}else{
								DATA.data.data[i].isMp4 = false
							}
							this.artArr.push(DATA.data.data[i])
						}
						console.log('文章列表',this.artArr);
						for (var i = 0; i < this.artArr.length; i++) {
							if (this.artArr[i].subhead_content){
								/* 单单取出富文本src里的路径 */
								let url = this.artArr[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/.*<img src="/g,'').replace(/".*/g,'')
								console.log(url);
								/* this.list[i].subhead_content = this.list[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/<.*src=\"/g,'').replace(/\".*>/g,'') */
								if (url.indexOf('.jpg') != -1){
									this.artArr[i].fowImgUrl = url
								}
								if(url.indexOf('.mp4') != -1){
									let num =Math.round(Math.random() * 3);		//随机生成背景图索引
									this.artArr[i].videoImage_url = this.artBgs[num];
								}
								this.artArr[i].subhead_content = this.artArr[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/<video.*video>/g,'').replace(/<img.*">/g,'')
							}
							if(this.artArr[i].content){
								let url2 = this.artArr[i].content
								if(url2.indexOf('.mp4') != -1&&url2.indexOf('.jpg') == -1){
									let num =Math.round(Math.random() * 3);		//随机生成背景图索引
									this.artArr[i].videoImage_url = this.artBgs[num];
								}
							}
						}
					}
					if(this.artArr.length > 0){
						this.isNotFound = false
					}else{
						this.isNotFound = true
					}
					console.log('isNotFound',this.isNotFound);
				})
			},
			/* 视频列表 */
			videoList(){
				let resData = {
					page:this.videoPage,
					pagesize:this.videoPagesize,
				}
				/* 搜索内容、话题、历史记录 */
				if(this.searchName){
					resData.title = this.searchName
				}
				this.$api.apiPost('user/video.Lists/VideoList',resData).then(res => {
					const DATA = res.data
					this.videoTotal = DATA.data.last_page
					console.log('DATA',DATA);
					if(DATA.code == 200){
						let list = DATA.data.data;
						list.forEach((v, i) => {
							v['key'] = (this.videoPage-1)*9+i
						})
						this.videoArr = DATA.data.data ;
						// for (let i = 0; i < DATA.data.data.length; i++) {
						// 	this.videoArr.push(DATA.data.data[i])
						// }
						console.log('视频列表',this.videoArr);
						this.status = 'more';
					}else{
						this.status = 'noMore';
						this.isNull = true;
					}
					if(this.videoArr.length > 0){
						this.isNotFound = false
					}else{
						this.isNotFound = true
					}
				})
			},
			/* 点击文章进入详情页面 */
			artDes(item){
				console.log(item);
				uni.navigateTo({
					url: '/pages/articleModule/newarticle-detail?stateType='+0+'&addType='+9+'&article_id='+item.article_id+'&isShare='+false+'&admin_user_id='+'&top='+1
				});
			}
		}
	}
</script>

<style scoped>
	.topBar{
		height: 100rpx;
		box-shadow: 0px 2px 4px rgba(0 0 0 / 12%);
		margin-bottom: 30rpx;
	}
	
	.topBar view{
		-webkit-flex: 1;
		flex: 1;
		text-align: center;
		line-height: 100rpx;
		color: #999999;
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.Medie{
		height: 294rpx;
		box-shadow: 0px 2px 4px rgba(0 0 0 / 12%);
		margin-bottom: 30rpx;
	}
	
	.Medie>view:first-child{
		padding: 40rpx 30rpx;
	}
	
	.Medie .title{
		color: #000000;
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.Medie .des{
		width: 690rpx;
	}
	
	.Medie .des view:first-child{
		margin-bottom: 20rpx;
		color: #333333;
		font-weight: bold;
		font-size: 28rpx;
		height: 75rpx;
		width: 400rpx;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
	}
	
	.Medie .des view{
		color: #C0C4CC;
		font-weight: bold;
		font-size: 24rpx;
	}
	
	.des image{
		width: 690rpx;
		height: 360rpx;
		border-radius: 10rpx;
		position: relative;
		margin-bottom: 20rpx;
	}
	
	.noContent{
		-webkit-flex: 1;
		flex: 1;
		text-align: center;
		margin-top: 222rpx;
	}
	
	.iconwujilu{
		font-size: 366rpx;
		color: #DCDFE6;
	}
	
	.notFind{
		font-weight: bold;
		color: #333333;
		font-size: 38rpx;
	}
	
	.sorry{
		font-weight: bold;
		color: #C0C4CC;
		font-size: 30rpx;
	}
	
	.feng image{
		width: 240rpx;
		height: 135rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}
	
	.des i{
		width: 690rpx;
		height: 360rpx;
		background: rgba(0, 0, 0, 0.5);
		background-color: ;
		position: absolute;
		font-size: 80rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 360rpx;
		border-radius: 10rpx;
	}
</style>
